<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 400px;
            display: block;
            border: 1px solid #999;
        }
    </style>
    <script src="echartsJs/echarts.js"></script>
</head>

<body>
    <div class="box" id="box1"></div>
    <script>
        let chartDom1 = document.getElementById("box1");
        let myChart1 = echarts.init(chartDom1);
        let option1 = {
            title: {//包含猪标题和副标题
                text: "每周气温",//主标题文本，支持使用\n换行
                link: "https://www.baidu.com",//主标题文本超链接。
                // subtext: "2022年11月的天气",//副标题文本，支持使用 \n 换行。
                left: "left",//'left', 'center', 'right' 
                // left:30
            },
            tooltip: {//构建跟随鼠标的浮动提示框(提示框组件)
                // trigger:"none",//相当于关闭提示
                trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                // formatter:"{a}{b}{c}",
                formatter: function (params) {
                    // console.log(params);//数组
                    let axisValue = "";
                    let str = "";
                    let count = 0;
                    for (let ser of params) {
                        // console.log(ser);//单个对象
                        if (axisValue == "") {
                            axisValue = ser.axisValue;
                        }
                        str += `
                            <div>
                                <span style='display:inline-block;margin-right:10px;width:10px;height:10px;border-radius:10px;background:${ser.color}'></span>
                                <span>${ser.seriesName}</span>
                                <span>${ser.data}</span>
                            </div>
                        
                        `;
                        count=count+ser.data;//count=0+5+15
                    }

                    let last = `
                            <div>
                                <span style='display:inline-block;margin-right:10px;width:10px;height:10px;border-radius:10px;background:red'></span>
                                <span>总计:</span>
                                <span>${count}</span>
                            </div>
                    `;
                  
                    return axisValue+str+last;



                }

            },
            legend: {//数据交互按钮，该配置中data的数据要和series中的name名称一一对应
                show: true,
                data: ["袜子", "鞋子"],
                top: 20
            },


            //对于直角坐标系而言，如果没有单独设置，x和y都是直接以渲染数据对应的data的每项数组进行坐标系定义
            xAxis: {
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                name: "星期",//坐标轴名称。
                nameTextStyle: {//坐标轴名称的文字样式
                    color: "red"
                },
                axisLabel: {//坐标轴刻度标签的相关设置。
                    interval: 1,//如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
                    rotate: 45
                },
                type: "category"//类目轴
            },
            yAxis: {//y轴
                name: "°C",
                nameTextStyle: {//坐标轴名称的文字样式
                    color: "red"
                },
                type: "value"//数值轴
            },
            series: [
                {
                    name: "袜子",
                    type: "bar",//折线图
                    data: [15, 20, 36, 10, 40, 20, 30],
                    label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                        show: true,

                    },

                    //完成多个柱状图的堆叠操作
                    stack: "x"
                },
                {
                    name: "鞋子",
                    type: "bar",
                    data: [5, 10, 16, 9, 10, 10, 9],
                    label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                        show: true,

                    },
                    stack: "x"
                },

            ]

        };
        myChart1.setOption(option1);
    </script>

</body>

</html>